import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import User from '@/views/User.vue';
import SearchResults from '@/views/SearchResults.vue';
import Router组件 from '@/views/Router组件.vue';
import PostComment from '@/views/PostComment.vue';
import NotFound from '@/views/NotFound.vue';
import UserGeneric from '@/views/UserGeneric.vue';
import Main from '@/views/Main.vue';
import Home from '@/views/Home.vue';
import Contact from '@/views/Contact.vue';
import About from '@/views/About.vue';
import AboutView from '@/views/AboutView.vue';
import LeftSidebar from '@/views/LeftSidebar.vue';
import RightSidebar from '@/views/RightSidebar.vue';

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'home',
            components: {
                default: HomeView,
                LeftSidebar: LeftSidebar,
                RightSidebar: RightSidebar,
            },
            props: route => ({ a: 1, b: 2, meta: route.meta }),
            meta: {
                name: 'ZZU',
                age: 18,
                height: 1.88,
            },
        },
        {
            path: '/search',
            components: {
                default: SearchResults,
                LeftSidebar: LeftSidebar,
                RightSidebar: RightSidebar,
            },
            props: route => ({ query: route.query.q })
        },
        {
            path: '/routerc',
            components: {
                default: Router组件,
                LeftSidebar: LeftSidebar,
                RightSidebar: RightSidebar,
            },
        },
        {
            path: '/about',
            name: 'about',
            components: {
                default: () => import('@/views/AboutView.vue'),
                LeftSidebar: LeftSidebar,
                RightSidebar: RightSidebar,
            },
        },
        {
            path: '/user/:userId',
            name: 'User',
            component: User,
            props: true
        },
        {
            path: '/post/:postId/comment/:commentId',
            name: 'PostComment',
            component: PostComment,
            props: true
        },
        { path: '/user-:afterUser(.*)', component: UserGeneric },
        {
            // 匹配任何非以上定义的路由
            path: '/:catchAll(.*)',
            name: 'NotFound',
            component: NotFound,
        },
        {
            path: '/main',
            component: Main,
            children: [
                {
                    path: 'home',
                    component: Home,
                },
                {
                    path: 'about',
                    component: About,
                },
                {
                    path: 'contact',
                    component: Contact,
                },
            ],
        },
        {
            path: '/chongdingxiang',
            redirect: '/about',
        },
        {
            path: '/about',
            component: AboutView,
            alias: '/company',
            // props: {name：'ZZU'} ,
        },
    ],
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;
        } else if (to.hash) {
            return { selector: to.hash };
        } else {
            return { x: 0, y: 0 };
        }
    }
});

// 动态添加路由
const mainRoute = {
    path: "/maind",
    name: "maind",
    component: Main
};

// 添加顶级路由对象
router.addRoute(mainRoute);

// 添加二级路由对象
router.addRoute("maind", {
    path: "Contact",
    component: () => import("@/views/Contact.vue")
});

// 路由守卫
let counter = 0;
router.beforeEach((to, from) => {
    console.log(`进行了${++counter}路由跳转`);
    // return false
    // if (to.path.indexOf("/home") !== -1) {
    //   return "/login"
    // }
    // if (to.path !== "/login") {
    //   const token = window.localStorage.getItem("token");
    //   if (!token) {
    //     return "/login"
    //   }
    // }
});

export default router;
